<!-- 添加渔塘 -->
<template>
  <div class="add-pond">
    <van-nav-bar left-arrow @click-left="() => $router.go(-1)" safe-area-inset-top style="background: #3e96e8">
      <template #title>
        <span style="color: #fff">池塘改名</span>
      </template>
      <template #left>
        <img style="width: 30px" src="../../assets/images/返回1.png" alt="" />
      </template>
    </van-nav-bar>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field label-width="1.8rem" colon v-model="form.name" name="池塘名称" label="池塘名称" placeholder="池塘名称"
          :rules="[{ required: true, message: '请输入池塘名称' }]" />

        <div class="btn">
          <van-button round block type="info" native-type="submit"
            color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { areaUpdateName, areaInfo } from "../../api/area";
export default {
  name: "",
  data() {
    return {
      form: {
        name: "",
        remark: "",
      },
    };
  },
  methods: {
    async onSubmit() {
      let userid = localStorage.getItem("userid");
      this.form.userid = userid;
      this.form.id = this.$route.query.id;
      let res = await areaUpdateName(this.form);
      if (res.status == 200) {
        Bus.$emit('val', "success")
        this.$toast(res.message);
        this.$router.go(-1);
      }
    },
    async getData() {
      let res = await areaInfo({ id: this.$route.query.id });
      if (res.status == 200) {
        var data = res.data;
        this.form.name = data.areaname;
      }
    }
  },
  computed: {},
  watch: {},
  created() {

    this.getData();

  },
  mounted() { },
};
</script>
<style lang="scss">
.add-pond {
  .van-field__label {
    margin-right: 0;
  }

  .van-field__body>input,
  .van-field__body>textarea {
    border: 1px solid #eee !important;
    border-radius: 5px;
    padding-left: 10px;
  }

  .van-field__label>span {
    width: 1.6rem !important;
    text-align: justify;
    justify-content: space-between;
  }
}
</style>
<style lang="scss" scoped>
.add-pond {
  width: 100%;
  height: calc(100vh - 100px);

  .content {
    width: 93%;
    height: calc(100vh - 220px);
    background-color: #fff;
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;

    .btn {
      width: 50%;
      margin: 200px auto 0;
    }
  }
}
</style>
